<template>
  <div class="flex">
    <div ref="barChartRef" style="width: 600px; height: 400px"></div>
    <div ref="pieChartRef" style="width: 600px; height: 400px"></div>
    <div ref="scatterChartRef" style="width: 600px; height: 400px"></div>
    <div ref="funnelChartRef" style="width: 600px; height: 400px"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const barChartRef = ref(null)
const pieChartRef = ref(null)
const scatterChartRef = ref(null)
const funnelChartRef = ref(null)

onMounted(() => {
  // 初始化柱状图
  const barChart = echarts.init(barChartRef.value)
  barChart.setOption({
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'bar'
      }
    ]
  })

  // 初始化饼图
  const pieChart = echarts.init(pieChartRef.value)
  pieChart.setOption({
    series: [
      {
        type: 'pie',
        radius: '50%',
        data: [
          { value: 335, name: 'A' },
          { value: 310, name: 'B' },
          { value: 234, name: 'C' },
          { value: 135, name: 'D' },
          { value: 1548, name: 'E' }
        ]
      }
    ]
  })

  // 初始化散点图
  const scatterChart = echarts.init(scatterChartRef.value)
  scatterChart.setOption({
    xAxis: {},
    yAxis: {},
    series: [
      {
        symbolSize: 20,
        data: [
          [10.0, 8.04],
          [8.0, 6.95],
          [13.0, 7.58],
          [9.0, 8.81],
          [11.0, 8.33],
          [14.0, 9.96],
          [6.0, 7.24],
          [4.0, 4.26],
          [12.0, 10.84],
          [7.0, 4.82],
          [5.0, 5.68]
        ],
        type: 'scatter'
      }
    ]
  })

  // 初始化漏斗图
  const funnelChart = echarts.init(funnelChartRef.value)
  funnelChart.setOption({
    series: [
      {
        type: 'funnel',
        data: [
          { value: 60, name: 'Step 1' },
          { value: 40, name: 'Step 2' },
          { value: 20, name: 'Step 3' },
          { value: 80, name: 'Step 4' },
          { value: 100, name: 'Step 5' }
        ]
      }
    ]
  })
})
</script>

<style>
/* 可选的样式 */
</style>
